<template>
  <div class="course-rec-card">
    <div class="pic" @click="navigateTo('/course/index', {id: `${courseId}`})">
      <img crossorigin="anonymous" :src="courseImg" />
    </div>
    <div class="name" :title="courseTitle" @click="navigateTo('/course/index', {id: `${courseId}`})">{{courseTitle}}</div>
    <div class="others">
      <div class="section-info">共{{ videoNum>=curVideoNum ? videoNum : curVideoNum }}讲  更新到{{ curVideoNum }}讲</div>
      <div class="tag-list">
        <a-tag :color="curVideoNum>=videoNum ? '' : 'error'">{{ curVideoNum>=videoNum ? '已完结' : '连载中' }}</a-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { useNavigation } from "@utils/navigation";

export default {
  name: 'CourseRecCard',
  props: {
    courseId: String,
    courseImg: String,
    courseTitle: String,
    videoNum: Number,
    curVideoNum: Number,
  },
  data () {
    return {
    }
  },
  setup () {
    const { navigateTo } = useNavigation();
    return {
      navigateTo
    }
  },
}
</script>

<style lang="less" scoped>
.course-rec-card {
  width: 100%;
  height: 324px;
  background: @white;
  box-shadow: 0px 2px 10px 0px @box-shadow-color;
  border-radius: 20px;

  .pic {
    width: 100%;
    height: 206px;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
      border-radius: 20px 20px 0 0;
    }
  }

  .name {
    height: 42px;
    line-height: 22px;
    font-size: 16px;
    color: @font-black;
    font-weight: 500;
    margin: 12px 20px 0 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  .others {
    height: 24px;
    line-height: 24px;
    margin: 15px 20px 0 20px;
    display: flex;
    flex-direction: row;
    align-items: center;

    .section-info {
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      font-weight: 500;
      color: @font-grey-light;
    }

    .tag-list {
      margin-left: 8px;
    }
  }
}
</style>
